<template>
	<view>
		<u-navbar
			title="详情"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<u-swiper
				height="260"
				:list="detail.image"
				keyName="url"
				indicator
				indicatorMode="dot"
				circular
			></u-swiper>
			<view class="p-detail-title">
				<view class="p-detail-title-1 u-line-2">{{detail.goodsName}}</view>
				<view style="font-size: 24rpx;color: #000;margin-bottom: 16rpx;">
					<text style="padding-right: 8rpx;">数量:</text>
					<text :style="{color:appColor}">1个</text>
				</view>
				<view class="p-detail-title-2">
					<view class="points-item-num" v-if="detail.price>0" :style="{color: appColor}">{{detail.score}}积分+{{detail.price}}元</view>
					<view class="points-item-num" v-else :style="{color: appColor}">{{detail.score}}积分</view>
					<view class="points-item-num1">剩余{{detail.stock}}件</view>
				</view>
			</view>
			<view class="p-detail-content">商品详情</view>
			<view style="padding: 0 32rpx;">
				<u-parse :content="detail.goodsDesc"></u-parse>
				<u-empty
					v-if="!detail.goodsDesc"
					text="暂无详情"
				    mode="data"
					icon="http://cdn.uviewui.com/uview/empty/data.png"
				>
				</u-empty>
			</view>
		</scroll-view>
		<view class="good-detail-bootom">
			<u-button @click="toChange" text="立即兑换" :disabled="detail.stock === 0" shape="circle" :color="appColor" block></u-button>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				list1: [
						'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					]
			}
		},
		computed: {
			...mapState(['appInfo', 'detail']),
			appColor() {
				return this.appPrimaryColor || '#f40215'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 - 50 + 'px';
			}
		},
		methods: {
			toChange() {
				this.$cuNavigateTo(`/pages/me/pointsOrder`);
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);     /*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);  /*兼容 iOS>11.2*/
		box-sizing: content-box;
	}
	
	.p-detail-title {
		padding: 32rpx;
		background-color: #fff;
		margin-bottom: 16rpx;
		.p-detail-title-1 {
			font-size: 28rpx;
			color: #000;
			margin-bottom: 16rpx;
		}
		.p-detail-title-2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.points-item-num {
				font-size: 24rpx;
				line-height: 24rpx;
			}
			.points-item-num1 {
				font-size: 24rpx;
				line-height: 24rpx;
				color: #999;
			}
		}
	}
	
	.p-detail-content {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		padding: 32rpx;
		background-color: #fff;
	}
</style>